<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #result {
            border: 1px solid #000;
            height: 5rem;
        }
    </style>
</head>

<body>
    <input type="text" id="cv1" onblur="trans1()"></input>
    <p>1 2 3 4 5</p>
    <input type="text" id="cv2" onblur="trans2()"></input>
    <p>1 0 1 1 0 =>1 2 1 1 2 </p>
    <input type="text" id="cv3" onblur="trans3()"></input>
    <p>3 4=>1/3 1/3 1/3 -1/4 -1/4 -1/4 -1/4 </p>

    <input type="text" id="cv4" onblur="trans4()"></input>
    <p>1 2 1 1 2 =>1/3 -1/2 1/3 1/3 </p>


    <label for="#result">rawscores</label>
    <div id="result" contenteditable="true"></div>
    <label for="#result2">rawscores</label>
    <div id="result2" contenteditable="true"></div>
    <div id="outp"></div>
    <script>
        let rb = document.querySelector("#result")
        let rb2 = document.querySelector("#result2")
        function trans1() {
            let a = document.querySelector("#cv1").value
            a = a.split("\n").join(" ")
            a = a.split("	").join(" ")
            console.log(`grp=[` + a + `]`)
            rb.innerHTML = a
        }

        function trans2() {
            let a = document.querySelector("#cv2").value
            a = a.split("\n").join(" ")
            a = a.split("	").join(" ")
            console.log(a)
            let b = a.split("0").join("2")
            rb.innerHTML = b
        }
        function trans3() {
            let [a, b] = document.querySelector("#cv3").value.split(" ")
            rb.innerHTML =
                `1/${a} `.repeat(a) +
                `-1/${b} `.repeat(b) +
                `1/2 1/2 -1/2 -1/2`

            rb2.innerHTML =
                `-1/${a} `.repeat(a) +
                `1/${b} `.repeat(b) +
                `-1/2 -1/2 1/2 1/2`


        }
        function trans4() {
            res = {}
            ans1 = ""
            ans2 = ""
            b = []
            c = []
            let a = document.querySelector("#cv4").value.split(" ")
            a.forEach(e => {
                res[e] = res[e] >= 1 ? res[e] + 1 : 1
            });
            let [key1, key2] = Object.keys(res)
            for (i of a) {
                if (key1 == i) {
                    b.push("1/" + res[key1].toString())
                    c.push("-1/" + res[key1].toString())
                } else {
                    b.push("-1/" + res[key2].toString())
                    c.push("1/" + res[key2].toString())
                }
            }

            rb.innerHTML = b.join(" ") + ` -1/2 -1/2 1/2 1/2`
            rb2.innerHTML = c.join(" ") + ` 1/2 1/2 -1/2 -1/2`

        }
    </script>
</body>

</html>